<template>
  <div>
    <div class="tool-nav">
      <div class="weather">
        <div style="color: #f5b104">
          {{ weather.province }}<br />{{ weather.city }}
        </div>
        <el-divider direction="vertical"></el-divider>
        <div>{{ weather.weather }}<br />{{ weather.temperature + "°C" }}</div>
      </div>
      <el-divider direction="vertical"></el-divider>
      <div
        class="tool-item"
        :class="navStatus.tool ? 'active' : ''"
        @click="activeClickTool('tool')"
      >
        <i class="el-icon-magic-stick"></i>
        <span>测量</span>
      </div>

      <el-divider direction="vertical"></el-divider>
      <div
        class="tool-item"
        :class="navStatus.traffic ? 'active' : ''"
        @click="activeClickTool('traffic')"
      >
        <i class="el-icon-guide"></i>
        <span>路况</span>
      </div>
      <el-divider direction="vertical"></el-divider>
      <div
        class="tool-item"
        :class="navStatus.heatmap ? 'active' : ''"
        @click="activeClickTool('heatmap')"
      >
        <el-tooltip content="一定尺度才显示" placement="bottom" effect="light">
          <i class="el-icon-place"></i>
          <span>热力图</span>
        </el-tooltip>
      </div>
      <el-divider direction="vertical"></el-divider>
      <div
        class="tool-item"
        :class="navStatus.buildings ? 'active' : ''"
        @click="activeClickTool('buildings')"
      >
        <el-tooltip
          content="将地图放至最大显示"
          placement="bottom"
          effect="light"
        >
          <i class="el-icon-office-building"></i>
          <span>3D建筑</span>
        </el-tooltip>
      </div>
      <el-divider direction="vertical"></el-divider>
      <div
        class="tool-item"
        :class="navStatus.satellite ? 'active' : ''"
        @click="activeClickTool('satellite')"
      >
        <i class="el-icon-link"></i>
        <span>卫星</span>
        <div
          class="roadNet right-move"
          :class="navStatus.roadNet ? 'active' : ''"
          v-show="navStatus.satellite"
          @click.stop="showRoadNet"
        >
          <i class="el-icon-view"></i>
          <span>路网</span>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
export default {
  data() {
    return {
      weather: {},
      navStatus: {
        tool: false,
        satellite: false,
        roadNet: false,
        traffic: false,
        heatmap: false,
        buildings: false,
      },
    };
  },
  props: ["adcode", "partList"],
  watch: {
    adcode(n) {
      if (n) {
        this.getWeather(n);
      }
    },
    partList(n) {
      if (this.navStatus.heatmap) {
        this.showHatChart(n);
      }
    },
  },
  methods: {
    // 判断工具栏点击的是什么按钮
    activeClickTool(e) {
      if (e == "tool") {
        if (!this.navStatus.tool) {
          this.navStatus.tool = true;
          this.$parent.allEvent = false;
          this.getMouseTool();
        } else {
          this.navStatus.tool = false;
          this.$parent.allEvent = true;
          this.MouseTool.close(true);
        }
      } else if (e == "satellite") {
        if (!this.navStatus.satellite) {
          this.navStatus.satellite = true;
          this.navStatus.roadNet = true;
          this.$parent.$satellite.show();
          this.$parent.$roadNet.show();
          this.$parent.$layer.hide();
        } else {
          this.navStatus.satellite = false;
          this.navStatus.roadNet = false;
          this.$parent.$satellite.hide();
          this.$parent.$roadNet.hide();
          this.$parent.$layer.show();
        }
      } else if (e == "traffic") {
        if (!this.navStatus.traffic) {
          this.navStatus.traffic = true;
          this.traffic = new AMap.TileLayer.Traffic();
          this.$parent.map.add(this.traffic);
        } else {
          this.navStatus.traffic = false;
          this.$parent.map.remove(this.traffic);
        }
      } else if (e == "heatmap") {
        if (!this.navStatus.heatmap) {
          this.navStatus.heatmap = true;
          this.showHatChart(this.partList);
        } else {
          this.navStatus.heatmap = false;
          this.heatmap.hide();
        }
      } else if (e == "buildings") {
        if (!this.navStatus.buildings) {
          this.navStatus.buildings = true;
          this.$parent.$buildings.show();
        } else {
          this.navStatus.buildings = false;
          this.$parent.$buildings.hide();
        }
      }
    },
    // 是否显示路网
    showRoadNet() {
      // console.log("showRoadNet");
      this.navStatus.roadNet = !this.navStatus.roadNet;
      if (this.navStatus.roadNet) {
        this.$parent.$roadNet.show();
      } else {
        this.$parent.$roadNet.hide();
      }
    },
    // 更换地图底图
    changeTileLayer() {},
    // 打开测量工具
    getMouseTool() {
      new Promise((resolve, reject) => {
        if (!this.MouseTool) {
          this.$parent.map.plugin(["AMap.MouseTool"], () => {
            this.MouseTool = new AMap.MouseTool(this.$parent.map);
            resolve();
          });
        } else {
          resolve();
        }
      }).then(() => {
        this.MouseTool.rule({
          startMarkerOptions: {
            //可缺省
            icon: new AMap.Icon({
              size: new AMap.Size(19, 31), //图标大小
              imageSize: new AMap.Size(19, 31),
              image: "//webapi.amap.com/theme/v1.3/markers/b/start.png",
            }),
            offset: new AMap.Pixel(-9, -31),
          },
          endMarkerOptions: {
            //可缺省
            icon: new AMap.Icon({
              size: new AMap.Size(19, 31), //图标大小
              imageSize: new AMap.Size(19, 31),
              image: "//webapi.amap.com/theme/v1.3/markers/b/end.png",
            }),
            offset: new AMap.Pixel(-9, -31),
          },
          midMarkerOptions: {
            //可缺省
            icon: new AMap.Icon({
              size: new AMap.Size(19, 31), //图标大小
              imageSize: new AMap.Size(19, 31),
              image: "//webapi.amap.com/theme/v1.3/markers/b/mid.png",
            }),
            offset: new AMap.Pixel(-9, -31),
          },
          lineOptions: {
            //可缺省
            strokeStyle: "solid",
            strokeColor: "#FF33FF",
            strokeOpacity: 1,
            strokeWeight: 2,
          },
        });
      });
    },
    // 查询实时天气
    getWeather(adcode) {
      new Promise((resolve, reject) => {
        if (!this.amapWeather) {
          this.$parent.map.plugin(["AMap.Weather"], () => {
            //构造 Weather 类
            this.amapWeather = new AMap.Weather();
            resolve();
          });
        } else {
          resolve();
        }
      }).then(() => {
        this.amapWeather.getLive(adcode, (err, res) => {
          this.weather = res;
        });
      });
    },
    // 展示热力图
    showHatChart(result) {
      // console.log("showHatChart");
      var info = [];
      for (let i = 0; i < result.length; i++) {
        info.push({
          lng: result[i].location.lng,
          lat: result[i].location.lat,
          count: 6,
        });
      }
      new Promise((resolve, reject) => {
        if (!this.heatmap) {
          this.$parent.map.plugin(["AMap.HeatMap"], () => {
            //初始化heatmap对象
            this.heatmap = new AMap.HeatMap(this.$parent.map, {
              radius: 56, //给定半径
              opacity: [0, 0.5],
              gradient: {
                0.5: "blue",
                0.65: "rgb(117,211,248)",
                0.7: "rgb(0, 255, 0)",
                0.9: "#ffea00",
                1.0: "red",
              },
              zooms: [11, 13],
            });
          });
          resolve();
        } else {
          resolve();
        }
      }).then(() => {
        //设置数据集
        this.heatmap.setDataSet({
          data: info,
          max: 10,
        });
        this.heatmap.show();
      });
    },
  },
};
</script>

<style lang="less" scoped>
.active {
  color: #2c9eff !important;
}
.tool-nav {
  position: absolute;
  top: 15px;
  right: 100px;
  width: 600px;
  height: 45px;
  background-color: rgba(255, 255, 255, 0.9);
  font-size: 15px;
  color: #565656;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: center;
  align-items: center;
  .tool-item:hover {
    color: #b0b3bf;
  }
  .roadNet:hover {
    color: #b0b3bf !important;
  }
  .tool-item {
    flex: 1;
    user-select: none;
    text-align: center;
    cursor: pointer;
    .roadNet {
      color: #565656;
      width: 65px;
      height: 45px;
      position: absolute;
      right: 0px;
      top: 0px;
      background-color: rgba(255, 255, 255, 0.9);
      border-radius: 4px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  .weather {
    padding-left: 5px;
    color: #1296db;
    user-select: none;
    text-align: center;
    cursor: default;
    font-size: 12px;
    display: flex;
    justify-content: center;
    flex-direction: row;
  }
}

.right-move {
  -webkit-animation: to-right-move 0.5s both;
  animation: to-right-move 0.5s both;
}
@-webkit-keyframes to-right-move {
  from {
    -webkit-transform: translateX(0);
    opacity: 0.3;
  }
  to {
    -webkit-transform: translateX(75px);
    opacity: 0.9;
  }
}

@keyframes to-right-move {
  from {
    transform: translateX(0);
    opacity: 0.3;
  }
  to {
    transform: translateX(75px);
    opacity: 0.9;
  }
}
</style>